<template>
	<el-container>
		<el-aside width="200px">
			<el-container>
				<el-header>
					<el-input placeholder="输入关键字进行过滤" v-model="groupFilterText" clearable></el-input>
				</el-header>
				<el-main class="nopadding">
					<el-tree ref="group" class="menu" node-key="id" :data="groupData" :props="{id:'value',label:'label'}" :current-node-key="''"
							 :highlight-current="true" :expand-on-click-node="false" :filter-node-method="groupFilterNode"
							 @node-click="groupClick"></el-tree>
				</el-main>
				<el-footer>

					<sc-upload-file :apiObj="this.$API.info.addressBook.importAddressBookForExcel" v-model="fileList" :limit="1" accept=".xls,.xlsx" style="margin:0px 10px 0px 10px;"
									:on-success="importAddressBookSuccess"
									:show-file-list="false">
						<el-button type="success" icon="sc-icon-download">导入通录讯</el-button>
					</sc-upload-file>
				</el-footer>
			</el-container>
		</el-aside>
		<el-aside width="200px">
			<el-container>
				<el-header>
					<div class="right-panel-search">
						<el-input v-model="search.keyword" placeholder="姓名检索" clearable></el-input>
						<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
					</div>
				</el-header>
				<el-scrollbar ref="userListBar" style="height: 100%">
					<el-empty description="暂无数据" :image-size="100" v-if="userList.length==0"></el-empty>
					<div v-for="item in userList" :key="item.letter">
						<div class="icon-box letter-item" :id="`letter_`+item.letter">
							<span>{{ item.letter }}</span>
						</div>
						<div class="icon-box" style="cursor: pointer;" v-for="user in item.list" :key="user.accountId" @click="showUserInfo(user)">
							<el-avatar style="float: left;" :src="user.avatar" size="small"></el-avatar>
							<p style="float: left;margin-left: 20px;line-height: 24px;">{{ user.userName }}</p>
						</div>
					</div>
				</el-scrollbar>
				<el-footer>
					<el-button type="primary" size="small" icon="el-icon-plus" style="width: 100%;" @click="addLinkMan">创建联系人</el-button>
				</el-footer>
			</el-container>
		</el-aside>
		<el-container>
			<el-header><span style="font-size: 16px;font-weight: 600;">基本信息</span></el-header>
			<el-main class="nopadding" v-show="isShowInfo">
				<el-card>
					<el-form-item label="姓名">{{userInfo.userName}}<span style="margin-left: 20px;" v-if="parentId=='1'">
						<el-button type="primary" icon="el-icon-edit" circle @click="editAddressBook"></el-button>
						<el-button type="danger" icon="el-icon-delete" circle @click="deleteAddressBook"></el-button>
					</span></el-form-item>
					<el-form-item label="性别">{{userInfo.sex=='1'?'男':'女'}}</el-form-item>
					<el-form-item label="手机">{{userInfo.mobileNo}}</el-form-item>
					<el-form-item label="职务">{{userInfo.levelName}}</el-form-item>
					<el-form-item label="部门">{{userInfo.deptName}}</el-form-item>
					<el-form-item label="邮件">{{userInfo.email}}</el-form-item>
					<el-form-item label="地址">{{userInfo.address}}</el-form-item>
				</el-card>
			</el-main>
		</el-container>
	</el-container>
	<save-dialog v-if="dialog.save" ref="saveDialog" @success="init" @closed="dialog.save=false"></save-dialog>
</template>
<script>
import saveDialog from './save'
export default {
	name: 'Address Book',
	components: {
		saveDialog,
	},
	data() {
		return {
			dialog: {
				save: false
			},
			groupFilterText: "",
			fileList:[],
			groupData: [
				{
					value: "1",
					label: "我的分组",
					children: []
				},
				{
					value: "2",
					label: "我的同事",
					children: []
				},
				{
					value: "3",
					label: "他人共享",
					children: []
				}
			],
			userList: [],
			userInfo:{},
			isShowInfo:false,
			parentId:'1',
			search:{
				keyword:''
			}
		}
	},
	watch: {
		groupFilterText(val) {
			this.$refs.group.filter(val);
		}
	},
	mounted() {
		this.getSysDicByCode();
		this.getUserLevel();
		this.init();
	},
	methods: {
		addLinkMan(){
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open()
			})
		},
		async editAddressBook()
		{
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open("edit").setData(this.userInfo);
			})
		},
		async deleteAddressBook()
		{
			let res = await this.$API.info.addressBook.deleteAddressBook.post({recordId:this.userInfo.recordId});
			if (res.code == 200) {
				this.init();
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		async init()
		{
			let res = await this.$API.info.addressBook.getMyAddressBookList.get(this.search);
			if (res.code == 200) {
				if(res.data){
					this.userList = res.data;
				}
			}
		},
		async upsearch()
		{
			let res;
			if (this.parentId == "1") {
				res = await this.$API.info.addressBook.getMyAddressBookList.get(this.search);
				if (res.code == 200) {
					this.userList = res.data;
				}
			} else if (this.parentId == "2") {
				res = await this.$API.info.addressBook.getMyFriendsByLevel.get(this.search);
				if (res.code == 200) {
					this.userList = res.data;
				}
			} else if (this.parentId == "3") {
				res = await this.$API.info.addressBook.getMyShareAddressBookList.get(this.search);
				if (res.code == 200) {
					this.userList = res.data;
				}
			}
		},
		importAddressBookSuccess()
		{
			this.$message.success("导入完成")
		},
		groupFilterNode(value, data) {
			if (!value) return true;
			return data.label.indexOf(value) !== -1;
		},
		showUserInfo(item) {
			this.isShowInfo = true;
			this.userInfo = item;
		},
		async getSysDicByCode() {
			let res = await this.$API.system.sysDic.getSysDicByCode.get({code: 'linkManType'});
			if (res.code == 200) {
				this.groupData[0].children = res.data;
				this.groupData[2].children = res.data;
			}
		},
		async getUserLevel() {
			let res = await this.$API.system.userLevel.getUserLevelForSelect.get();
			if (res.code == 200) {
				this.groupData[1].children=res.data;
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		async groupClick(data, e) {
			this.parentId = e.parent.data.value;
			let v = data.value;
			let res;
			if (this.parentId == "1") {
				res = await this.$API.info.addressBook.getMyAddressBookList.get({bookType: v,keyword:''});
				if (res.code == 200) {
					this.userList = res.data;
				}
			} else if (this.parentId == "2") {
				res = await this.$API.info.addressBook.getMyFriendsByLevel.get({levelId: v,keyword:''});
				if (res.code == 200) {
					this.userList = res.data;
				}
			} else if (this.parentId == "3") {
				res = await this.$API.info.addressBook.getMyShareAddressBookList.get({bookType: v,keyword:''});
				if (res.code == 200) {
					this.userList = res.data;
				}
			}
		}
	}
}
</script>

<style>
.icon-box {
	height: 40px;
	text-align: center;
	background: #fff;
	border-bottom: 1px solid #eee;
	border-right: 1px solid #eee;
	color: #666;
	padding: 10px 10px;
}

.showLetter span {
	width: 50px;
	height: 50px;
	line-height: 50px;
	font-size: 30px
}

.letter-item {
	text-align: left;
	background: aliceblue;
	font-size: 16px;
	font-weight: 600;
	padding-left: 20px;
}

.letter {
	display: inline-block;
	padding-left: 5px;
	position: absolute;
	top: 100px;
	right: 0px;
}

.letter ul li {
	list-style-type: none;
	text-decoration: none;
	color: #409EFF;
	font-size: 18px;
	cursor: pointer;
}

.letter ul li:hover {
	background-color: #bbbbbb;
}


.city-list p {
	color: #afafaf;
	width: 95%;
	height: 50px;
	line-height: 50px;
	border-bottom: 1px solid #e8ecf1;
	cursor: pointer
}
</style>
